"use client";
import React, { useEffect, useRef, useState } from "react";
import "./business.css";
import { getBusiness, getBusinessContent } from "@/app/api/index";
import { Image } from "antd";
import classNames from "classnames";
import parse from "html-react-parser";

export default function Business({ params }: { params: { id: string } }) {
  const [businessList, setBusinessList] = useState([]);
  const [selected, setSelected] = useState(params.id);
  const [subSelected, setSubSelected] = useState(params.id);
  const [areaTitle, setAreaTitle] = useState("民生体系");
  const [content, setContent] = useState("");
  const businessListFlag = useRef([{}]);
  const subSelectedFlag = useRef("");
  useEffect(() => {
    getBusiness().then((res) => {
      setBusinessList(res.data);
      let temp = res.data;
      businessListFlag.current = res.data;
      let flag = false;
      //如果这个循环中找到了对应的id，那么说明是点击导航菜单进入的
      temp.forEach((item: any) => {
        if (item.id == params.id) {
          flag = true;
          setAreaTitle(item.title);
          setSubSelected(item.children[0].id);
          subSelectedFlag.current = item.children[0].id;
          getBusinessContent(item.children[0].id).then((res) => {
            setContent(res.data);
          });
        }
      });
      //如果没找到，那么说明是点击首页下面的业务板块中的卡片进入的
      if(!flag){
        temp.forEach((item:any)=>{
          item.children.forEach((subItem:any)=>{
            if(subItem.id == params.id){
              setAreaTitle(item.title);
              setSubSelected(subItem.id);
              subSelectedFlag.current = subItem.id;
              getBusinessContent(subItem.id).then((res) => {
                setContent(res.data);
              });
            }
          })
        })
      }
    });
  }, []);

  const changePage = (id: string) => {
    setSelected(id);
    businessListFlag.current.forEach((item: any) => {
      if (item.id === id) {
        setAreaTitle(item.title);
        setSubSelected(item.children[0].id);
        subSelectedFlag.current = item.children[0].id;
        getBusinessContent(item.children[0].id).then((res) => {
          setContent(res.data);
        });
      }
    });
  };

  const selectSub = (parent: string, child: string, parentTitle: string) => {
    if (subSelectedFlag.current !== child) {
      setSelected(parent);
      setSubSelected(child);
      setAreaTitle(parentTitle);
      subSelectedFlag.current = child;
      getBusinessContent(child).then((res) => {
        setContent(res.data);
      });
    }
  };

  return (
    <div className="content">
      <div className="business_header">
        <div className="header_title">业务板块</div>
        <div className="header_sub">Business Segment</div>
      </div>
      <div className="content_area">
        <div className="navigation_left">
          <div className="header_center">
            <Image
              src="/assets/header/sub/ywbk.svg"
              width={"100%"}
              preview={false}
              alt=""
            ></Image>
          </div>
          {businessList.map((item: any, index) => {
            return (
              <div key={item.id}>
                <div
                  className={classNames(
                    selected === item.id
                      ? "navigation_selected"
                      : "navigation_select"
                  )}
                  onClick={() => changePage(item.id)}
                >
                  {item.title}
                </div>
                {item.children.map((child: any, index: number) => {
                  return (
                    <div
                      key={child.id}
                      className={classNames(
                        subSelected === child.id ? "subSelected" : "subSelect"
                      )}
                      onClick={() => selectSub(item.id, child.id, item.title)}
                    >
                      {child.title}
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>
        <div className="table_area">
          <div className="area_header">
            <div className="area_title">{areaTitle}</div>
          </div>
          <div className="business_introduce_area">{parse(content ?? "")}</div>
        </div>
      </div>
    </div>
  );
}
